<template>
<div class="it-toasts" v-show="states" transition="pop">
	<div class="mask"></div>
	<div class="it-toasts-text"  >
		<div class="toast-content">
			<p class="text">{{dataMsg}}</p>
		</div>
	</div>
</div>
</template>

<style lang="sass">
	@import "../../public/css/common.scss";
	.mask{
		position: fixed;
	    z-index: 1;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	}
	.it-toasts-text{
		position: fixed;
		left: 50%;
		top: 50%;
		max-width: 80%;
		z-index: 10;
		background: rgba(40,40,40,.75);
		text-align: center;
		@include borderRaduis(4px);
		@include boxSizing(border-box);
		-webkit-transform: translateX(-50%);
	    transform: translateX(-50%);
	    margin-left: 0;
	}
	.toast-content{
		color: #fff;
		padding: 0 $spacing;
	}
	.pop-transition {
        transition: opacity .3s linear;
    }
    .pop-enter, .pop-leave {
        opacity: 0;
    }
</style>

<script >
	export default {
		repalce: true,
		props: {
			states: {
				type: Boolean,
				default: false
			},
			time: {
		      type: Number,
		      default: 2000
		    },
			dataMsg : String
		},
		watch: {
		    'states': {
		    	handler: function(val) {
		    		if(val){
		    			clearTimeout(this.timeout);
		    			this.timeout = setTimeout(() => {
		    				this.states = false
		    			}, this.time);
		    		}
		    	}
		    }
		}
	}
</script>